<template>
  <div class="radioBox">
    <headerTop :isActive="isActive"></headerTop>
    <div class="headers">
      <img v-if="data.json_content" :src="data.json_content.cover" alt="" />
      <div class="controls" @click="goPlay(open)">
        <img v-if="open" src="./../../assets/播放.png" alt="" />
        <img v-else src="./../../assets//暂停.png" alt="" />
      </div>
    </div>

    <div class="radioContent" v-if="data.json_content">
      <div class="texts">
        <!-- 文本区 -->
        <!-- 标题 -->
        <div>
          {{ data.title }}
        </div>
        <!-- 主播名和期数 -->
        <div class="simple">
          <div>{{ data.json_content.simple_author[0] }}</div>
          <div>{{ data.json_content.simple_author[1] }}</div>
        </div>
        <!--文本内容 -->
        <div v-html="data.json_content.content"></div>
        <!-- 责任编辑 -->
        <div>{{ data.json_content.editor }}</div>
      </div>
    </div>

    <!-- one收音机 -->
    <div class="oneRadio">
      <div class="img"></div>
      <div style="margin-left: 10px">
        <div>ONE收音机</div>
        <div>“讲述生活，与你常在”</div>
      </div>
    </div>

    <div style="padding: 15px">
      <!-- 评论区及其作者 -->
      <Editor :edit="data" :comments="comments"></Editor>
    </div>
    <bottomBar :data="data"></bottomBar>

    <audioOverLay
      ref="bar"
      :data="data"
      :open="open"
      @change="change"
    ></audioOverLay>
  </div>
</template>

<script>
import { getArticleContent, getComment } from "@/api/articlesPage";
import headerTop from "@/components/headerTop.vue";
import Editor from "@/components/editor.vue";
import bottomBar from "@/components/bottomBar.vue";
import audioOverLay from "@/components/audioOverLay.vue";
export default {
  name: "radio",
  components: {
    headerTop,
    Editor,
    bottomBar,
    audioOverLay,
  },
  data() {
    return {
      name: "收音机",
      data: {},
      // isActive是控制导航栏是否有背景色
      comments: {},
      isActive: false,
      open: true,
    };
  },
  created() {
    this.getRadioContent();
  },
  methods: {
    async getRadioContent() {
      const { data } = await getArticleContent(this.$route.query.id, "radio");
      this.data = data;
      console.log("收音机数据", this.data);
      if (this.data.json_content) {
        this.getComments();
      }
    },
    async getComments() {
      // 获取阅读的评论
      const { data } = await getComment(
        this.data.json_content.type,
        this.data.id,
        this.commentId
      );
      this.comments = data;
      console.log(this.comments);
    },

    goPlay() {
      // if(this.open){
      //   this.$refs.audio.play()
      //   this.$refs.bar.play()
      // }else{
      //   this.$refs.audio.pause()
      // }
      this.open = !this.open;
      if (this.open) {
        this.$refs.bar.play();
      } else {
        this.$refs.bar.play();
      }
    },
    change(n) {
      console.log("nnnnn", n);
      this.open = n;
    },
  },
};
</script>

<style lang="less" scoped>
.radioBox {
  width: 375px;
  .headers {
    position: relative;
    img {
      width: 100%;
    }
    .controls {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      img {
        width: 30px;
        height: 30px;
      }
    }
  }

  .radioContent {
    padding: 0 15px;
    ::v-deep .texts {
      padding: 20px 0;
      background: #ffffff;
      .simple {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
        font-size: 10px;
      }
      p {
        margin: 10px 0;
      }
    }
  }

  .oneRadio {
    width: 375px;
    height: 80px;
    background: #fbfbfb;
    padding: 10px;
    box-sizing: border-box;
    display: flex;

    .img {
      width: 60px;
      height: 60px;
      background-image: url("./../../assets/radio_banner_1125_600.jpg");
      background-size: 100px;
      background-position: 50%, 40%;
      margin-left: 5px;
    }
  }
}
</style>